<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-09-01 09:15:51
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-09 17:01:33
 * @FilePath: \cxl-admin\src\pages\index\Index.vue
-->
<template>
    <section class="home-container">
        <template v-for="item in data.list">
            <div :class="[item.className, 'item']" :key="item.label" v-if="item.visible">
                <h1>{{ item.label }}</h1>
                <div
                    :class="['item-block', item.bg[index], item.iconSize[index] ? '' : 'small']"
                    v-for="(child, index) in item.title"
                    :key="child"
                >
                    <div class="item-icon" v-if="item.icon.length">
                        <img :src="item.icon[index]" alt="" />
                    </div>
                    <div class="item-box">
                        <p>
                            {{ child }}
                        </p>
                        <span>
                            {{ item.data[index] }}
                            <i>{{ item.unit }}</i>
                        </span>
                    </div>
                </div>
            </div>
        </template>
    </section>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import IndexData from './index'
import { CountUp } from 'countup.js'

/**
 * 初始化数据
 */
const data = reactive(new IndexData())
</script>

<style scoped lang="scss">
.home-container {
    background-color: #fff;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 8px;
    min-height: 100%;

    .item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        h1 {
            width: 100%;
            margin-bottom: 16px;
            font-weight: bold;
            font-size: 18px;
        }
        .item-block {
            width: calc(25% - 16px);
            height: 140px;
            box-sizing: border-box;
            margin-bottom: 16px;
            border: 1px solid #ebeef5;
            border-radius: 10px;
            display: flex;
            padding: 35px 8px;
            &.bg1 {
                background: #1d7dfa;
                .item-box {
                    p {
                        color: #fff;
                    }
                    span {
                        color: #fff;
                        i {
                            color: #fff;
                        }
                    }
                }
            }
            &.bg2 {
                background: linear-gradient(180deg, #dbebff 0%, rgba(255, 255, 255, 0) 35%);
            }
            &.bg3 {
                background: #39bf56;
                .item-box {
                    p {
                        color: #fff;
                    }
                    span {
                        color: #fff;
                        i {
                            color: #fff;
                        }
                    }
                }
            }
            &.bg4 {
                background: linear-gradient(180deg, #e3ffe9 0%, rgba(255, 255, 255, 0) 35%);
            }
            &.bg5 {
                background: #fff4f3;
                border-color: #ff5448;
            }

            &.small {
                .item-box {
                    padding: 0 16px 0 8px;
                }
            }

            .item-icon {
                padding: 0 0 0 16px;
            }
            .item-box {
                box-sizing: border-box;
                padding: 0 16px;
                p {
                    font-size: 16px;
                    margin-bottom: 10px;
                    color: #606266;
                    display: flex;
                    align-items: center;
                }
                span {
                    font-size: 36px;
                    font-weight: bold;
                    width: 100%;
                    i {
                        color: #606266;
                        font-size: 14px;
                    }
                }
            }
        }
        &.query {
            .item-block {
                width: calc(16.66% - 16px);
            }
        }
    }
}
@media only screen and (max-width: 1600px) {
    .home-container {
        .item {
            &.query {
                .item-block {
                    width: calc(33.33% - 16px);
                }
            }
        }
    }
}
@media only screen and (max-width: 1000px) {
    .home-container {
        .item {
            .item-block {
                width: calc(50% - 16px);
            }
            &.query {
                .item-block {
                    width: calc(50% - 16px);
                }
            }
        }
    }
}
</style>
